<template>
	<view>
		<view class="common imp">
			<uni-nav-bar :fixed="true" color="#fff" background-color="rgba(255,255,255,0)" :border="false"
				left-icon="chat" status-bar title="首页" />
			<view class="main">

				<view class="nav">
					<uni-search-bar radius="100" placeholder="焦作市山羊" clearButton="always" cancelButton="none"
						@confirm="search">\
						<template v-slot:searchIcon>
							<uni-icons color="#196eee" size="18" type="location-filled" />
						</template>
					</uni-search-bar>
				</view>


				<view class="card">


					<navigator url="/pacakgeRepair/pages/repairSearch/repairSearch">

						<view style="background-color: #4881f7;">
							<img src="@/static/车辆维修1-01@2x.png" alt="" />
						</view>

						<view class="">
							车辆维修
						</view>
					</navigator>
					<navigator url="/packageMaintenance/pages/maintenance/maintenance">
						<view style="background-color: #ffc444;">
							<img src="@/static/保养@2x.png" alt="" />
						</view>

						<view class="">
							汽车保养
						</view>
					</navigator>
					<navigator url="/pacakgeRepair/pages/repairSearch/repairSearch">
						<view style="background-color: #70de2d;">
							<img src="@/static/洗车@2x.png" alt="" />
						</view>

						<view class="">
							专业洗车
						</view>
					</navigator>
					<navigator url="/packageFuelUp/pages/fuelUp/fuelUp">
						<view style="background-color: #83bdff;">
							<img src="@/static/加油枪@2x.png" alt="" />
						</view>

						<view class="">
							就近加油
						</view>
					</navigator>

				</view>

				<view class="jiayouzahn">
					<uni-section title="附近加油站" sub-title="加油站推荐" padding="0 0 5px 10px">
						<template v-slot:right>

							<view class="right">
								<navigator url="/packageFuelUp/pages/navigation/navigation" class="more">
									<view class="text">
										加油
									</view>
									<view class="arrow">

									</view>
								</navigator>

							</view>

						</template>

						<map style="width: 100%; height: 200px;" :latitude="latitude" :longitude="longitude"
							:markers="markersList"></map>

					</uni-section>
				</view>

				<view class="tuangou">

					<!-- <navigator url="/pacakgeRepair/pages/repairSearch/repairSearch" >
					<view class="more">
						<view class="text">
							团购
						</view>
						<view class="arrow">
							
						</view>
					</view>
				
					
					
				</navigator> -->

					<uni-section class="mb-10" title="优惠团购" sub-title="优惠推荐推荐" padding="0 0 5px 10px">

						<template v-slot:right>

							<view class="right">
								<navigator url="/packageFuelUp/pages/tuangou2/tuangou2" class="more">
									<view class="text">
										团购
									</view>
									<view class="arrow">

									</view>
								</navigator>

							</view>

						</template>

						<uni-grid :column="2" :show-border="false" :square="false" @change="change">
							<uni-grid-item v-for="(item ,index) in list" :index="index" :key="index">
								<view class="grid-item-box">
									<image class="image" :src="item.url" />
									<text class="text">{{item.text}}</text>

								</view>
							</uni-grid-item>
						</uni-grid>
					</uni-section>
				</view>


				<!-- <navigator url="/pacakgeRepair/pages/repairSearch/repairSearch">去维修跳转</navigator>
			<navigator url="/pacakgeBase/pages/login/login">去登录</navigator>
			<navigator url="/pacakgeBase/pages/city/city">去选择城市</navigator> -->

			</view>
		</view>


		<view>
			<CustomNavigationBar />
		</view>



	</view>

</template>

<script>
	import CustomNavigationBar from "@/components/CustomNavigationBar.vue"; // 根据实际路径调整
	import {
		getLocation,
		sesearchGas
	} from '@/api/map/map.js';

	export default {
		components: {
			CustomNavigationBar
		},
		data() {
			return {
				user: null,
				latitude: null,
				longitude: null,
				markersList: [],

				list: [{
						url: "/static/图层 1@2x.png",
						text: 'Grid 1',

					},
					{
						url: "/static/图层 1@2x.png",
						text: 'Grid 1',

					},

					{
						url: "/static/图层 1@2x.png",
						text: 'Grid 1',

					},
					{
						url: "/static/图层 1@2x.png",
						text: 'Grid 1',

					},
					{
						url: "/static/图层 1@2x.png",
						text: 'Grid 1',

					}
				]

			}
		},
		onLoad() {
			//页面接获取 全局 用户对象
			console.log("接收user", getApp().globalData.user);
			//赋值
			this.user = getApp().globalData.user;
			console.log("接收到user", this.user);

			if(this.user == null){
				return
			};
			
	


			getLocation()
				.then((res) => {
					console.log("位置信息获取成功", res);
					// 在这里可以使用 res 进行后续操作，例如提取经纬度
					this.latitude = res.data.result.location.lat;
					this.longitude = res.data.result.location.lng;
					console.log("位置信息获取成功", this.latitude);
					console.log("位置信息获取成功", this.longitude);
				})
				.then(()=>{
					// 假设已经有了正确的经纬度值
					const latitude = 30.0;
					const longitude = 120.0;
					const keyWords = "加油站";
					const radius = 5000;
					
					sesearchGas(this.latitude, this.longitude, keyWords, radius)
						.then((resp) => {
							console.log("搜索加油站成功", resp);
							var mks = []
							for (var i = 0; i < resp.data.data.length; i++) {
								mks.push({ // 获取返回结果，放到mks数组中
									//  title: res.data[i].title,
									id: resp.data.data[i].id * 1,
									latitude: resp.data.data[i].location.lat,
									longitude: resp.data.data[i].location.lng,
									iconPath: "/static/定位2.png", //图标路径
									width: 20,
									height: 20,
									callout: {
										content: resp.data.data[i].title, // 点击标记点时显示的内容
										fontSize: 14,
										borderRadius: 10,
										bgColor: '#fff',
										padding: 5,
										display: 'ALWAYS'
									}
								})
					
							}
					
							console.log(mks)
							this.markersList = mks;
					
					
						})
						.catch((error) => {
							console.error("搜索加油站失败", error);
						});
					
				})
				.catch((error) => {
					console.error("位置信息获取失败", error);
				});

			
			


		


		},




		methods: {

			// 获取当前位置
			// getPosition() {
			//     uni.getLocation({
			//         type: 'wgs84',
			//         success: (res) => {
			//             console.log('当前位置的经度：' + res.longitude);
			//             console.log('当前位置的纬度：' + res.latitude);
			//             this.longitude = res.longitude;
			//             this.latitude = res.latitude;
			//         }
			//     });
			// },


			// getLocation() {
			//         return new Promise((resolve, reject) => {
			//             let key = "G2UBZ-RDHKB-JZBU2-NDLHV-YVZDZ-PEB42";
			//             uni.request({	
			//                 url: 'https://apis.map.qq.com/ws/location/v1/ip?key=' + key,
			//                 data: {},
			//                 method: "GET",
			//                 success: (resp) => {
			//                     console.log("接收到当前位置经纬度数据", resp);
			//                     if (resp.data && resp.data.result && resp.data.result.location) {
			//                         this.latitude = resp.data.result.location.lat;
			//                         this.longitude = resp.data.result.location.lng;
			//                         console.log('响应数据', resp);
			//                         console.log('当前位置的经度：', this.longitude);
			//                         console.log('当前位置的纬度：', this.latitude);
			//                         resolve();
			//                     } else {
			//                         console.error("数据结构不符合预期", resp);
			//                         reject(new Error('数据结构不符合预期'));
			//                     }
			//                 },
			//                 fail: (err) => {
			//                     console.error("获取用户位置失败", err);
			//                     reject(err);
			//                 }
			//             });
			//         });
			//     },

			// sesearchGas() {
			//     return new Promise((resolve, reject) => {
			//         let key = "G2UBZ-RDHKB-JZBU2-NDLHV-YVZDZ-PEB42";
			//         let keyWords = "加油站";
			//         let radius = 5000; 
			//         let boundary = `nearby(${this.latitude},${this.longitude},${radius})`;

			//         let encodedKey = encodeURIComponent(key);
			//         let encodedKeyWords = encodeURIComponent(keyWords);
			//         let encodedBoundary = encodeURIComponent(boundary);
			//         let url = `https://apis.map.qq.com/ws/place/v1/search?key=${encodedKey}&keyword=${encodedKeyWords}&boundary=${encodedBoundary}`;

			//         uni.request({
			//             url: url,
			//             data: {},
			//             method: "GET",
			//             success: (resp) => {
			//                 console.log("接收到当前查询数据", resp);
			//                 if (resp.data && resp.data.status === 0) {
			//                     // 假设状态码为 0 表示请求成功
			//                     console.log("搜索成功，结果如下：", resp.data.data);

			// 					 var mks = []
			// 					       for (var i = 0; i < resp.data.data.length; i++) {
			// 							    mks.push({ // 获取返回结果，放到mks数组中
			// 							             //  title: res.data[i].title,
			// 							              id: resp.data.data[i].id *1,
			// 							              latitude: resp.data.data[i].location.lat,
			// 							              longitude: resp.data.data[i].location.lng,
			// 							              // iconPath: "@/static/定位2.png", //图标路径
			// 							              width: 20,
			// 							              height: 20,
			// 							                callout : {
			// 							                 content:resp.data.data[i].title,  // 点击标记点时显示的内容
			// 							                 fontSize: 14,
			// 							                 borderRadius: 10,
			// 							                 bgColor: '#fff',
			// 							                 padding: 5,
			// 							                 display: 'ALWAYS'
			// 							             }
			// 							            })

			// 						   }

			// 						   console.log(mks)
			// 						 this.markersList=mks;  
			//                     resolve(resp.data.data);
			//                 } else {
			//                     console.error("搜索失败，错误信息：", resp.data.message);
			//                     reject(new Error(resp.data.message || '搜索失败，未知错误'));
			//                 }
			//             },
			//             fail: (err) => {
			//                 console.error("搜索加油站请求失败", err);
			//                 reject(err);
			//             }
			//         });
			//     });
			// },

			initMarkersList() {

			},

			search(res) {
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
			},
			input(res) {
				console.log('----input:', res)
			},
			clear(res) {
				uni.showToast({
					title: 'clear事件，清除值为：' + res.value,
					icon: 'none'
				})
			},
			blur(res) {
				uni.showToast({
					title: 'blur事件，输入值为：' + res.value,
					icon: 'none'
				})
			},
			focus(e) {
				uni.showToast({
					title: 'focus事件，输出值为：' + e.value,
					icon: 'none'
				})
			},
			cancel(res) {
				uni.showToast({
					title: '点击取消，输入值为：' + res.value,
					icon: 'none'
				})
			},
			tt() {
				console.log("点击了");
			}
		}



	}
</script>

<style scoped>
	.common>.main {
		padding-bottom: 200rpx;
	}

	.nav {

		background-color: #fff;
	}

	::v-deep .uni-searchbar {
		width: 100%;
	}

	::v-deep .uni-searchbar__box {
		background-color: transparent !important;
	}

	::v-deep .uni-searchbar {
		padding: 0rpx;

	}

	.card {
		display: flex;
		background-color: #fff;
		justify-content: space-between;
		align-items: center;
		padding-top: 20rpx !important;
		padding-bottom: 20rpx !important;

	}

	.card>navigator {
		border-radius: 5rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		row-gap: 10rpx;
	}

	.card>navigator>view:nth-child(1) {
		padding: 20rpx 10rpx;
		border-radius: 20rpx;

	}

	.card>navigator img {
		width: 100rpx;
		height: 60rpx;

		vertical-align: middle;

	}

	.card>navigator>view:nth-child(2) {
		line-height: 40rpx;
	}

	.shop,
	.station {
		background-color: #fff;
	}


	/* 开始加油站 */

	.jiayouzahn,
	.tuangou {
		background-color: #fff;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		position: relative;
	}

	.more {
		right: 20rpx;
		top: 70rpx;
	}




	/* 	::v-deep .grid-item-box{
		display: flex;
		flex-direction: column;
	}
	 */
	/* 	 ::v-deep  .uni-grid-item{
		 bo
		
	} */
	.grid-item-box .text {
		line-height: 60rpx;
		height: 60rpx;

	}

	.grid-item-box image {
		width: 300rpx;
		height: 200rpx;
		border-radius: 10rpx;
	}



	.navBar {
		text-align: center;
	}

	.tabbarAdd {
		position: fixed;
		bottom: 35rpx;
		width: 100%;
		z-index: 999;
		display: flex;
		justify-content: center;
		align-items: center;


	}

	.outer {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		border: 5rpx solid #f7f7f7;
		background: linear-gradient(to left, #ff5314, #ff9743);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.outer>image {
		width: 50rpx;
		height: 50rpx;

		margin-top: -20rpx;

	}

	/* 去除 底部导航栏的边框 */
	::v-deep .uni-tabbar-border {
		height: 0rpx;
	}

	/* #ifdef MP */

	.tabbarAdd {
		bottom: -50rpx;
		z-index: 9999;
	}

	/* #endif */
</style>